<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="__PUBLIC__/plugins/cropper/cropper.min.css">
    <style type="text/css">
    img {
        max-width: 100%;
        /* This rule is very important, please do not ignore this! */
    }

    .profile img{
      max-width: 200px;
      max-height: 200px;
    }
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
    .preview{
      width: 100%;
      display: block;
      min-height: 80px;
      min-width: 80px;
      overflow: hidden;
    }
    .profileimg{
      /*display: none;*/
    }
    </style>
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                  用户管理
                  <small>帐号管理</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">用户</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- box -->
                        <div class="box box-primary">
                            <div class="box-header with-border">
                                <h3 class="box-title">基础信息</h3>
                            </div>
                            <!-- /.box-header -->
                            <!-- form start -->
                            <form role="form" action="index" method="post" enctype="multipart/form-data">
                                <div class="box-body">
                                    <div class="col-xs-8">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">昵称</label>
                                            <input type="txt" class="form-control" name="name" placeholder="输入昵称" value="{$user.name}">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">绑定手机号</label>
                                            <input type="txt" class="form-control" name="phone" placeholder="手机号" value="{$user.phone}">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">绑定邮箱号</label>
                                            <input type="email" class="form-control" name="email" placeholder="邮箱号" value="{$user.email}">
                                        </div>
                                    </div>
                                    <div class="col-xs-4 profile">
                                        <if condition="session('user.pic_path') neq 0">
                                          <img src="__PUBLIC__/Uploads/user/{:session('user.pic_path')}200x200/{:session('user.pic_name')}"class="img-circle img-thumbnail docs-tooltip" data-original-title="点击更换图片" data-toggle="tooltip" />
                                            <else/> 
                                            <img src="__PUBLIC__/pictures/profile.jpg" class="img-circle img-thumbnail docs-tooltip" data-original-title="点击更换图片" data-toggle="tooltip" />
                                        </if>
                                       
                                        <input type="hidden" name="cropinfo[]" />
                                        <input type="file" name="photo[]" style="display:none" />
                                    </div>
                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer">
                                    <button type="submit" class="btn btn-primary">更改</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </section>
        </div>
        <!-- /.content -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">裁剪图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <img id="image" src="__PUBLIC__/pictures/1.jpg" class="img-responsive" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="prebtn" class="btn btn-primary">确认裁剪</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <!-- /.content-wrapper -->
        <include file="layout/copyright" />
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <include file="layout/footer" />
    <script src="__PUBLIC__/plugins/cropper/cropper.js"></script>
    <!-- 当前定制 -->
    <!-- DOM 操作 -->
    <!-- ./DOM -->
    <!-- AJAX -->
    <script type="text/javascript">
    $(document).ready(function() {
        $image = $('#image');
        var cropBoxData, canvasData;

        $('#myModal').on('shown.bs.modal', function() {
            $image.cropper({
                aspectRatio: 1,
                viewMode: 3,
                built: function() {
                    $image.cropper('setCanvasData', canvasData);
                    // $image.cropper('setCropBoxData',cropBoxData);
                }
            });
        }).on('hidden.bs.modal', function() {
            cropBoxData = $image.cropper('getCropBoxData');
            canvasData = $image.cropper('getCanvasData');
            $image.cropper('destroy');
        })

        // Import image添加图片
        var $inputImage = $('.inputImage');
        var URL = window.URL || window.webkitURL;
        var blobURL;

        if (URL) {
            $('body').delegate(':file', 'change', (function() {
                var files = this.files;
                var file;

                if (files && files.length > 0) {
                    file = files[0];

                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        $image.prop('src', blobURL);
                        $('#myModal').modal('show');
                        $image.one('built.cropper', function() {
                            // Revoke when load complete
                            URL.revokeObjectURL(blobURL);
                        });
                        // $inputImage.val('');
                    } else {
                        window.alert('请选择图像文件.');
                    }
                } else {

                }
            }));
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }
        //添加图片
        $('#prebtn').click(function() {
            var result = $image.cropper('getCroppedCanvas', {
                width: 300,
                height: 300
            });
            var cropInfo = $image.cropper('getData');
            $('.profile:last img').prop('src', result.toDataURL('img/jpeg'));
            $('.profile:last input:first').val(JSON.stringify(cropInfo));
            $('#myModal').modal('hide');
        });


        $('body').delegate('.profile img', 'click', function() {
            $(this).parent().find(':file').click();
        })
    });
    </script>
    <!-- /AJAX -->
    <!-- ./定制结束 -->
</body>

</html>